<template>
  <div>
    <van-nav-bar
      title="修改资料"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 头像 -->
    <edit-avatar
      :avatarImg="userInfoList.user_img"
      @updataAvatar="updataAvatar"
    ></edit-avatar>
    <van-cell-group>
      <!-- 昵称 -->
      <van-cell
        title="昵称"
        center
        clickable
        @click="isNameDialogShow = true"
        >{{ userInfoList.name }}</van-cell
      >
      <!-- UID -->
      <van-cell title="UID" center>{{ userInfoList.id }}</van-cell>
      <!-- 性别 -->
      <van-cell title="性别" center clickable @click="isSixSheetShow = true">
        {{ userInfoList.gender == 1 ? "男" : "女" }}
      </van-cell>
      <!-- 个性签名 -->
      <van-cell
        title="个性签名"
        center
        clickable
        @click="isDescDialogShow = true"
      >
        <p v-if="userInfoList.user_desc">{{ userInfoList.user_desc }}</p>
        <p v-else>这个人很懒,什么都没有留下</p>
      </van-cell>
      <!-- 生日 -->
      <van-cell
        title="出生年月"
        center
        clickable
        @click="isBirthdayShow = true"
        >{{ userInfoList.date }}</van-cell
      >
    </van-cell-group>

    <!-- 修改昵称弹框 -->
    <van-dialog
      title="昵称修改"
      v-model="isNameDialogShow"
      show-cancel-button
      @confirm="nameConfirm"
      @cancel="nameVal = ''"
    >
      <van-field v-model="nameVal" placeholder="请输入昵称" />
    </van-dialog>
    <!-- 修改个性签名弹框 -->
    <van-dialog
      title="个性签名修改"
      v-model="isDescDialogShow"
      show-cancel-button
      @confirm="descConfirm"
      @cancel="descVal = ''"
    >
      <van-field
        v-model="descVal"
        rows="2"
        type="textarea"
        maxlength="50"
        placeholder="请输入个性签名"
        show-word-limit
      />
    </van-dialog>
    <!-- 修改性别弹框 -->
    <van-action-sheet
      v-model="isSixSheetShow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSixSelect"
    />
    <!-- 修改生日 -->
    <van-calendar v-model="isBirthdayShow" @confirm="onBirthdayConfirm" />
  </div>
</template>

<script>
import { getUserInfoAPI, getUpdataAPI } from "@/network/api";

import EditAvatar from "./EditAvatar";
import { Toast } from "vant";
export default {
  name: "Edit",
  data() {
    return {
      userInfoList: {},
      isNameDialogShow: false, // 昵称弹出框
      nameVal: "", // 昵称内容
      isDescDialogShow: false, // 个性签名弹出框
      descVal: "", // 个性签名内容
      //性别弹出框
      isSixSheetShow: false,
      actions: [
        { name: "男", val: 1 },
        { name: "女", val: 0 },
      ],
      // 生日
      isBirthdayShow: false,
      date: "",
    };
  },
  components: { EditAvatar },
  methods: {
    // 定义方法：发送axios请求修改数据/api/update/id/this.userInfoList
    updata() {
      console.log("更新数据");
      getUpdataAPI(localStorage.getItem("id"), this.userInfoList)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            Toast({
              message: "修改成功",
              icon: "like-o",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    updataAvatar(updataAvatar) {
      this.userInfoList.user_img = updataAvatar;
      console.log(updataAvatar);
      this.updata();
    },
    nameConfirm() {
      console.log("昵称点击了确定");
      this.userInfoList.name = this.nameVal;
      this.updata();
      this.nameVal = "";
    },
    descConfirm() {
      console.log("个性签名点击了确定");
      this.userInfoList.user_desc = this.descVal;
      this.updata();
      this.nameVal = "";
    },
    onSixSelect(action) {
      this.userInfoList.gender = action.val;
      this.updata();
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onBirthdayConfirm(date) {
      this.isBirthdayShow = false;
      this.date = this.formatDate(date);
      this.userInfoList.date = date;
      this.updata();
    },
  },
  mounted() {
    getUserInfoAPI(
      localStorage.getItem("id"),
      localStorage.getItem("token")
    ).then((res) => {
      this.userInfoList = res.data[0];
    });
  },
};
</script>

<style scoped  lang="less" >
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>